import React, {PureComponent} from "react";
import LoginAndRegTitle from "./LoginAndRegTitle";
import {connect} from "react-redux";
import {actionCreator} from "./store";


class LoginComponent extends PureComponent {

    render() {
        return (
            <div style={loginWrapperStyle}>
                <div style={loginContentStyle}>
                    <LoginAndRegTitle
                      title={"登录"}
                    />
                    <input
                        style={loginAccountStyle}
                        placeholder={"请填写你的账号"}
                        onChange={(e) => {
                            this.props.changeInputAccount(e, true, 0)
                        }}
                        value={this.props.loginAccountValue}
                    />
                    <input
                        style={loginPwdStyle}
                        placeholder={"请填写你的密码"}
                        onChange={(e) => {
                            this.props.changeInputAccount(e, true, 1)
                        }}
                        value={this.props.loginPwdValue}
                    />
                    <div
                        style={loginRegiStyle}
                        onClick={()=>{
                            this.props.updateLoginState(false, true)
                        }}
                    >去注册
                    </div>
                    <div
                        style={loginSubmitStyle}
                        onClick={()=>{
                            this.props.updateLoginState(false, false)
                        }}
                    >登录
                    </div>
                </div>
            </div>
        );
    }

}

// loginAccountValue: "",
//     loginPwdValue: "",
const mapState = (state) => {
    return {
        loginAccountValue: state.getIn(["headerReducer", "loginAccountValue"]),
        loginPwdValue: state.getIn(["headerReducer", "loginPwdValue"])
    }
};

const disMapState = (dispatch) => {
    return {
        changeInputAccount(e, tag, inputTag) {
            const action = actionCreator.changeLoginAccountInput(e, tag, inputTag);
            dispatch(action);
        }, updateLoginState(loginState, resState) {
            console.log("logidn");
            const action = actionCreator.updateLoginAndRegisterState(loginState, resState);
            dispatch(action);
        }
    }
};


export default connect(mapState, disMapState)(LoginComponent);

const loginWrapperStyle = {
    width: "100%",
    height: "100%",
    position: "fixed",
    top: 0,
    left: 0,
    backgroundColor: "rgba(0,0,0,.3)",
    zIndex: 5,
};

const loginContentStyle = {
    width: 400,
    height: 290,
    backgroundColor: "#fff",
    position: "relative",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)",
    borderRadius: 3,
};

//margin top right bottom left
const loginAccountStyle = {
    width: 342,
    height: 37,
    border: "solid 1px #adadad",
    borderRadius: 2,
    boxSizing: "border-box",
    margin: "30px 30px 10px",
    fontSize: 16,
    paddingLeft: 5,
    lineHeight: "37px",

};

const loginPwdStyle = {
    width: 342,
    height: 37,
    lineHeight: "37px",
    border: "solid 1px #adadad",
    borderRadius: 2,
    boxSizing: "border-box",
    margin: "0 30px 10px",
    paddingLeft: 5,
    fontSize: 16,

};

const loginRegiStyle = {
    color: "#3498db",
    position: "absolute",
    right: "30px",
    textDecoration: "underLine",
    fontSize: 14,
};

const loginSubmitStyle = {
    margin: "70px 30px 0",
    width: 342,
    height: 40,
    lineHeight: "40px",
    textAlign: 'center',
    backgroundColor: "#3498db",
    borderRadius: 4,
    color: "#fff",
    fontSize: 16,
};
